<template>
  <div id="box">
    <div id="headlines-box">
      <div id="headlines">
        <div id="imgBox">
          <img src="../../public/imgs/animation/20250131085246.jpg" width="350"/>
        </div>
        <a id="context">
          <span>被"逼急"的中国团队, 如何3天震塌硅谷AI帝国?</span>
        </a>
        <a id="detail">
          <span>打开微信，朋友圈被 DeepSeek 的对话截图刷屏。这一次，不再是科技圈的自嗨，而是 AI 真正第一次走进了中国普通人的生活。</span>
        </a>
      </div>
      <div class="headlines-list">
        <SXQList :list="list1" :page-size="4" title="热门话题"/>
      </div>

      <div class="headlines-list">
        <SXQList :list="list2" :page-size="4" title="热点"/>
      </div>

      <div class="headlines-list">
        <SXQList :list="list1" :page-size="4" title="头条"/>
      </div>
    </div>
    <div id="body-box">
      <h2>好友动态</h2>
      <SXQFriendUpdateList :friend-list="friendList" :callback="loadDataFriendUpdates"/>
    </div>

    <!--分页-->
    <div id="page">
      <Page :total="count" :page-size="pageSize" show-total @on-change="changePage($event)"/>
    </div>
  </div>
</template>

<script>
import SXQList from "@/components/SXQ-List";
import SXQFriendUpdateList from "@/components/SXQ-FriendUpdateList";
import {friendUpdatesCount, friendUpdatesPageQuery} from "@/api/api";

export default {
  name: "HomePage",
  components: {SXQFriendUpdateList, SXQList},
  created() {
    friendUpdatesCount().then(res => {
      if (res.body.code == 1) {
        const count = res.body.data
        sessionStorage.setItem("count", count)
        // 组件加载前查询好友动态
        this.loadDataFriendUpdates()
      }
    })
  },
  methods: {
    loadDataFriendUpdates() {
      // 页面挂在完毕后, 向后端发起请求, 获取分页数据
      friendUpdatesPageQuery(this.currentPage, 5).then(res => {
        // 请求成功
        if (res.body.code == 1) {
          let data = res.body.data
          // 构造临时集合
          let tempList = []
          data.forEach(it => {
            tempList.push({
              id: it.id,
              img: it.img,
              nums: [it['hitsCount'], it['likeCount'], it['commentCount'], it['collectCount'], it['shareCount']],
              content: it.content,
              title: it.title,
              createTime: it['createTime'],
              avatar: it['avatar'],
              nickname: it['nickname'],
              userId: it['userId']
            })
          })

          // 将数据放入缓存, 避免重复获取
          sessionStorage.setItem("friendUpdatesList", JSON.stringify(tempList))
          // 数据提取到全局, 防止局部刷新数据丢失
          this.$store.state.friendUpdatesList = JSON.stringify(tempList)
          // 渲染数据
          this.friendList = tempList
        } else {
          this.$Message.error(res.body.msg)
        }
      })
    },

    // 换页时查找好友动态
    changePage(event) {
      this.currentPage = event
      this.loadDataFriendUpdates()
    }
  },
  data() {
    return {
      friendList: JSON.parse(this.$store.state.friendUpdatesList),
      // 总页数
      count: sessionStorage.getItem("count"),
      // 每页大小
      pageSize: 5,
      // 页数
      pageCount: 1,
      // 当前页
      currentPage: 1,

      list1: [
        {
          title: "111！Linux内核代码狂飙至4000万行，十年膨胀了一倍",
          context: "随着 Linux 6.14 rc1 的发布，Linux 内核的源代码总量首次超过 4000 万行。"
        },
        {
          title: "每两月新增40万行！Linux内核代码狂飙至4000万行，十年膨胀了一倍",
          context: "随着 Linux 6.14 rc1 的发布，Linux 内核的源代码总量首次超过 4000 万行。"
        },
        {
          title: "每两月新增40万行！Linux内核代码狂飙至4000万行，十年膨胀了一倍",
          context: "随着 Linux 6.14 rc1 的发布，Linux 内核的源代码总量首次超过 4000 万行。"
        },
        {
          title: "每两月新增40万行！Linux内核代码狂飙至4000万行，十年膨胀了一倍",
          context: "随着 Linux 6.14 rc1 的发布，Linux 内核的源代码总量首次超过 4000 万行。"
        },
        {
          title: "每两月新增40万行！Linux内核代码狂飙至4000万行，十年膨胀了一倍",
          context: "随着 Linux 6.14 rc1 的发布，Linux 内核的源代码总量首次超过 4000 万行。"
        }
      ],
      list2: [
        {
          title: "13123123123123123123123123123123123123",
          context: "13123123123123123123123123123123123123"
        },
        {
          title: "13123123123123123123123123123123123123",
          context: "13123123123123123123123123123123123123"
        },
        {
          title: "13123123123123123123123123123123123123",
          context: "13123123123123123123123123123123123123"
        },
        {
          title: "13123123123123123123123123123123123123",
          context: "13123123123123123123123123123123123123"
        },
        {
          title: "13123123123123123123123123123123123123",
          context: "13123123123123123123123123123123123123"
        },
        {
          title: "1",
          context: "13123123123123123123123123123123123123"
        },
        {
          title: "1",
          context: "13123123123123123123123123123123123123"
        },
        {
          title: "1",
          context: "13123123123123123123123123123123123123"
        }
      ]
    }
  }
}
</script>

<style scoped>
#box {
  width: 100vw;
  display: inline-block;
  margin-top: 20px;
}

#headlines {
  width: 350px;
  height: fit-content;
  margin-left: 70px;
  /*border: black solid 1px;*/
  display: inline-block;
}

#imgBox {
  cursor: pointer;
  margin-bottom: 10px;
}

img {
  border-radius: 5px;
}

#context {
  font-size: 17px;
  font-weight: 700;
  color: #222226;
}

#context:hover {
  text-decoration: underline;
}

#detail {
  margin-top: 6px;
  font-size: 15px;
  font-weight: bold;
  color: #999;
  display: inline-block;
}

#headlines-box {
  width: fit-content;
  /*border: 1px solid black;*/
}

#body-box {
  width: fit-content;
  margin-left: 70px;
  margin-top: 50px;
  /*border: 1px solid black;*/
}

.headlines-list {
  float: right;
  display: inline-block;
  height: 300px;
  /*border: 1px solid black;*/
}
</style>